<template>
    <div class="main">
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon :name="backicon" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">订单详情</span>
            </template>
        </van-nav-bar>
        

        <div class="good-info">
            <div class="good-info-title">商品详情</div>
            <div class="good-info-detail">
                <div class="good-info-detail-img" :style="{'background-image':`url(http://www.starrymedia.vip${OrderData.goods.image})`}">
                </div>
                <div class="good-info-detail-text">
                    <p>{{OrderData.goods.brand}} {{OrderData.goods.english_name}}</p>
                    <p>{{OrderData.goods.goods_name}} {{OrderData.goods.color}}</p>
                    <div class="good-info-detail-attri">
                        <span class="good-info-detail-size">{{OrderData.goods.attr_value}}</span>
                        <span class="good-info-detail-unit">码</span>
                        <img src="../../assets/img/payblack.png" alt="">
                        <span>{{OrderData.goods.shop_price}} <span>X</span> {{OrderData.goods.goods_num}}</span>
                    </div>
                </div>
            </div>
        </div>  

        <div class="ps" @click="Jumptoagre">
            <img src="../../assets/img/i.png" alt="">
            <span>本商城支持<strong>14</strong>天无理由退货</span>
        </div>

        <div class="user-address">
            <div class="user-address-title">收货地址</div>
            <div class="user-address-info">
                <p>{{OrderData.address.user_name}}<span class="address-phone">{{OrderData.address.phone}}</span></p>
                <p>
                <span class="address-item">{{OrderData.address.shi}} {{OrderData.address.qu}} {{OrderData.address.address}}</span>
                <span class="address-defult"></span>
                </p> 
            </div>
            <img src="../../assets/img/order-address-edit.png" @click="JumpToAdd" class="user-address-edit-img" alt="编辑地址">
        </div>


        <!-- <div class="order-detail">
            <div class="order-detail-title">订单详情</div>
            <div class="order-detail-info">
                <p>下单时间 <span>2020-03-02 18:20:01</span></p>
                <p>订单编号 <span>702388694321005</span></p>
            </div>
        </div> -->

        <div class="pay-detail">
            <div class="pay-detail-title">订单详情</div>
            <div class="pay-detail-info">
                <p>下单时间<span>{{OrderData.order.add_time | formateDate}}</span></p>
                <p>订单编号<span>{{OrderData.order.order_sn}}</span></p>
                <p>商品金额<span>￥{{OrderData.order.goods_amount}}</span></p>
                <p style="color:#333;font-weight: bolder;">优惠券<span>- ￥ {{OrderData.order.discount}}</span></p>
            </div>
            <div class="pay-count-template">
                <p>订单金额<span>￥ {{OrderData.order.total_amount}}</span></p>
            </div>
        </div>

        <img src="../../assets/img/rightpay.png" @click="pay" class="order-again-img" alt="">
    </div>
</template>
<script>
import {_confirmOrder,_orderPay} from '../../service/order'

export default {
    data(){
        return{
            backicon:require('../../assets/img/backicon.png'),
            OrderData:{
                image:""
            }
        }
    },
    created(){
        // let obj=this.$route.query.data
        let obj=localStorage.getItem("OrderItem")
        console.log(obj)
        if(obj==null||obj==undefined){
            this.$router.push("/indexs")
            return
        }
        this.getOrderData(JSON.parse(obj))
        if(localStorage.getItem("Address")!=null&&localStorage.getItem("Address")!=undefined){
            localStorage.removeItem("Address")
        }
    },
    filters:{
        formateDate(time){
            return moment(time*1000).format('YYYY-MM-DD HH:mm:ss')
        }
    },
    methods:{
        Jumptoagre(){
			this.$router.push({path:"/reg/UserAgreement",query:{id:3}})
		},
        JumpToAdd(){
            localStorage.setItem("Address","/order")
            this.$router.push("/manageaddress")
        },
        onClickLeft(){
            let id=JSON.parse(localStorage.getItem("OrderItem")).goods_id
            this.$router.push({path:'/details',query: {id}})
            // this.$router.go(-1)
        },
        getOrderData(obj){
            let _this=this
            _confirmOrder(obj).then(res=>{
                console.log(res)
                if(res.errcode==1){
                    _this.OrderData=res.data
                }else if(res.errcode==-1){
                    _this.$toast("请先填写默认地址")
                    _this.$router.push("/editaddress")
                }else if(res.errcode==0){
                    _this.$toast(res.message)        
                    // _this.$router.push("/login")
                }else if(res.errcode==-2){
                    _this.$toast(res.message)
                    _this.$router.push("/index")
                }else if(res.errcode==-3){
                    _this.$toast(res.message)
                    _this.$router.go(-1)
                }else if(res.errcode==-4||res.errcode==-5||res.errcode==-6||res.errcode==-7){
                    _this.$toast("系统错误")
                    _this.$router.go(-1)
                }else{
                    _this.$toast(res.message)
                }
            })
        },
        pay(){
            let _this=this
            try{
                let uid=JSON.parse(localStorage.getItem("user")).user_id
                _orderPay({
                    // order_id:this.OrderData.order.order_id,
                    order_sn:this.OrderData.order.order_sn,
                    user_id:uid,
                    openid:JSON.parse(localStorage.getItem("WxUserInfo")).openid,
                    address_id:this.OrderData.address.address_id
                }).then(res=>{
                    console.log(res)
                    // alert(JSON.stringify(res))
                    let jsApiParameters=res.data;
                    function onBridgeReady(){
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                                "appId":jsApiParameters.appid ? jsApiParameters.appid : jsApiParameters.appId,     //公众号名称，由商户传入     
                                "timeStamp":jsApiParameters.timeStamp, //时间戳，自1970年以来的秒数     
                                "nonceStr":jsApiParameters.nonceStr, //随机串     
                                "package":jsApiParameters.package,     
                                "signType":jsApiParameters.signType, //微信签名方式：     
                                "paySign":jsApiParameters.paySign //微信签名 
                            },
                        function(res){
                            if(res.err_msg == "get_brand_wcpay_request:ok") {
                                _this.$router.push({path:'/own',query:{showOrder:1}})
                                localStorage.removeItem("OrderItem")
                                localStorage.removeItem("Address")
                                console.log("Successed::",JSON.stringify(res))
                            }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
                                this.$toast.fail("您已取消支付")
                                console.log("Cancel::",JSON.stringify(res))
                            }else{
                                this.$toast.fail("支付调起失败")
                                console.log("Error::",JSON.stringify(res))
                                return false;
                            }
                        }); 
                    }
                    if (typeof WeixinJSBridge == "undefined"){
                        if( document.addEventListener ){
                            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                        }else if (document.attachEvent){
                            document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
                            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                        }
                    }else{
                        onBridgeReady();
                    }

                        // wx.chooseWXPay({
                        //     timestamp: jsApiParameters.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                        //     nonceStr: jsApiParameters.nonceStr, // 支付签名随机串，不长于 32 位
                        //     package: jsApiParameters.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                        //     signType: jsApiParameters.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                        //     paySign: jsApiParameters.paySign, // 支付签名
                        //     success: function (res) {
                        //         // 支付成功后的回调函数
                        //         alert("Successed::",JSON.stringify(res))
                        //     }
                        // });


                    
                    
                })
            }catch(e){
                // alert(JSON.stringify(e))
            }
        }
    }
}
</script>
<style lang="less" scoped>
.font-SC(){
    font-family: "PingFang SC","Microsoft YaHei";
}


.main{
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background-color: #f2f2f2;

    .hometitle{
        font-size: 18px;
        .font-SC();
        font-weight: bold;
        color: #000;
        line-height: 46px;
    }
    
    .good-info{
        width: 100%;
        height: 115px;
        background-color: #fff;
        margin-top: 5px;
        padding: 12px 15px 20px 25px;
        box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
    }
    .good-info-title{
        .font-SC();
        font-size: 15px;
        color: #333;
    }
    .good-info-detail-img{
        display: inline-block;
        width: 90px;
        height: 80px;
        background-position: center top !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }

    .good-info-detail-text{
        width: 208px;
        display: inline-block;
        margin-left: 24px;
        vertical-align: top;
        margin-top: 10px;
        p{
            .font-SC();
            font-size: 12px;
            color: #999;
            margin-bottom: 2px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .good-info-detail-attri{
            font-family: "DINPro-Bold";
            font-size:12px;
            color: #999;
            .good-info-detail-size{
                margin-right: 0.421vh;
            }
            .good-info-detail-unit{
                margin-right: 3.237vh;
                .font-SC();
            }
            img{
                width: 8px;
                margin-right: 5px;
            }

        }
    }
    .ps{
        height: 25px;
        line-height: 25px;
        float: right;
        .font-SC();
        font-weight: bold;
        padding-right: 15px;
        vertical-align: middle;
        span{
            font-size: 9px;
            color: #333;
        }
        img{
            width: 12px;
            margin-right: 4px;
        }
    }


    .user-address{
        width: 100%;
        height: 96px;
        margin-top: 25px;
        background-color: #fff;
        padding: 15px;
        box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
        .user-address-title{
            .font-SC();
            font-weight: bold;
            font-size: 15px;
            color: #333;
        }
        .user-address-info{
            .font-SC();
            font-size: 15px;
            color: #999;
            margin-top: 6px;
            width: 80%;
            p{
                .font-SC();
                font-size: 12px;
                color: #999;
                margin-bottom: 0px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                line-height: 18px;
                .address-phone{
                    margin-left: 11px;
                    font-family: "DINPro Medium";
                }
                .address-defult{
                    display: inline-block;
                    font-weight: normal;
                    margin-left: 26px;
                    vertical-align: top;
                }
                .address-item{
                    display: inline-block;
                    width:139px;
                    display:inline-block;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }
            
            
        }
        .user-address-edit-img{
            width: 16px;
            float: right;
            margin-top: -22px;
            margin-right: 17px;
        }
    }


    .order-detail{
        width: 100%;
        height: 89px;
        background-color: #fff;
        margin-top: 6px;
        padding: 15px;
        box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
        .order-detail-title{
            .font-SC();
            font-weight: bold;
            font-size: 15px;
            color: #333;
        }
        .order-detail-info{
            margin-top: 6px;
            p{
                .font-SC();
                font-size: 12px;
                color: #999;
                margin-bottom: 0;
                line-height: 27px;
                span{
                    font-family: "DINPro Medium";
                    font-weight: normal;
                    float: right;
                    // margin-right: 2.3vh;
                }
            }
        }
    }

    .pay-detail{
        width: 100%;
        height: 205px;
        background-color: #fff;
        margin-top: 6px;
        box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
        .pay-detail-title{
            .font-SC();
            font-weight: bold;
            font-size: 15px;
            color: #333;
            padding-top: 15px;
            padding-left: 15px;
        }
        .pay-detail-info{
            margin-top: 3px;
            padding: 0 15px 7px 15px;
            border-bottom: 1px solid #efefef;
            p{
                .font-SC();
                font-size: 12px;
                color: #999;
                margin-bottom: 0;
                display: flex;
                justify-content: space-between;
                line-height: 27px;
                span{
                    font-family: "DINPro Medium";
                    font-weight: normal;
                    // margin-right: 2.3vh;
                }
                .pay-type{
                    .font-SC();
                    font-size: 12px;
                    color: #999;
                }
            }
        }
        .pay-count-template{
            line-height: 50px;
            p{
                .font-SC();
                font-weight: bold;
                font-size: 15px;
                color: #333;
                display: flex;
                justify-content: space-between;
                padding-left: 15px;
                padding-right: 15px;
                span{
                    font-family: "DINPro Medium";
                    font-weight: normal;
                }
            }
        }
    }


    .order-again-img{
        width: 367px;
        margin: 66px auto 36px auto;
        display: flex;
        justify-content: center;
        align-content: flex-end;
    }
}

</style>